<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">
 
 <h:head>
 <title>Prime Faces com Eclipse</title>
 </h:head>
 <h:body>
 	<h:form id="form">
	<p:growl id="messages"/>
	<p:layout fullPage="true" >
		<p:layoutUnit id="top" position="north" size="50">            
		        <!-- MenuBar - Ref.: http://www.primefaces.org/showcase/ui/menubar.jsf -->
				<p:menubar autoDisplay="false" style="font-size: 12px;">
			        <p:submenu label="Arquivo" >
			            <p:submenu label="Novo" icon="ui-icon-contact">
			                <p:menuitem value="Pessoa Física" icon="ui-icon-person" url="#" helpText="CTRL+ALT+F"/>
			                <p:menuitem value="Pessoa Jurídica" icon="ui-icon-suitcase" url="#" />
			                <p:menuitem value="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Sinopse" url="#" />
			                <p:menuitem value="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Tipo de Ocorrência" url="#" />
			                <p:separator />
			                <p:menuitem value="Documento" icon="ui-icon-document" url="#" />
			                <p:menuitem value="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Tipo de Documento" url="#" />
			                <p:separator />
			                <p:menuitem value="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Tipo de Agência" url="#" />
			                <p:menuitem value="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Partido Político" url="#" />
			                <p:menuitem value="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Profissão" url="#" />
			                <p:menuitem value="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Tipo de Pessoa Jurídica" url="#" />
			                <p:menuitem value="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Cargo" url="#" />
			                <p:menuitem value="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Pronome de Tratamento" url="#" />
			                <p:menuitem value="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Grau de Sigilo" url="#" />
			                <p:menuitem value="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Posto / Graduação" url="#" />
			                <p:separator />
			                <p:menuitem value="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Bairro" url="#" />
			                <p:menuitem value="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Cidade" url="#" />
			                <p:menuitem value="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Estado" url="#" />
			                <p:menuitem value="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;País" url="#" />
			                <p:separator />
			                <p:menuitem value="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Parte do Corpo Humano" url="#" />
			                <p:menuitem value="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Tipo de Detalhe (Carac. Física)" url="#" />
			            </p:submenu>
			            <p:menuitem value="Salvar" icon="ui-icon-disk" url="#" />
			            <p:menuitem value="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Salvar Tudo" url="#" />
			            <p:separator />
			            <p:menuitem value="Imprimir" icon="ui-icon-print" url="#" />
			            <p:separator />
			            <p:menuitem value="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Fechar Formulário" url="#" />
			            <p:menuitem value="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Fechar Todos os Formulário" url="#" />
			            <p:separator />
			            <p:menuitem value="Quit" url="#" icon="ui-icon-power"/>
			        </p:submenu>
			
			        <p:submenu label="Editar" >
			        	<p:submenu label="Localizar" url="#" icon="ui-icon-search" >
			        		 <p:menuitem value="Pessoa Física" url="#" />
			        		 <p:menuitem value="Pessoa Jurídica" url="#" />
			        		 <p:menuitem value="Policial Militar" url="#" />
			        		 <p:menuitem value="Documento" url="#" />
			        		 <p:menuitem value="Sinopse" url="#" />
			        		 <p:menuitem value="Bairro ou Cidade" url="#" />
			        		 <p:menuitem value="Inconsistências" url="#" />
			        		 <p:menuitem value="Pesquisa em Lote" url="#" />
			       		 </p:submenu>
			       		 <p:separator />
			       		 <p:menuitem value="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Importar Fotos" url="#" />
			        		
			<!--             <p:menuitem value="Undo" url="#" icon="ui-icon-arrowreturnthick-1-w" /> -->
			<!--             <p:menuitem value="Redo" url="#" icon="ui-icon-arrowreturnthick-1-e" /> -->
			        </p:submenu>
			
			        <p:submenu label="Formatar" >
			        	<p:submenu label="Fonte">
			            	<p:menuitem value="Maiúsculas" url="#" />
			                <p:menuitem value="Minúsculas" url="#" />
			                <p:menuitem value="Nome Próprio" url="#" />
			            </p:submenu>
			        </p:submenu>
			        
			        <p:submenu label="Exibir">
			        	<p:menuitem value="Itens Ativos" url="#" />
			        	<p:menuitem value="Janela de Pesquisa" url="#" />
			        	<p:menuitem value="Resultado de Pesquisa" url="#" />
			        	<p:separator/>
			        	<p:menuitem value="Atualizar" url="#" />
			        	<p:separator/>
			        	<p:menuitem value="Últimas Sinopses" url="#" />
			        	<p:menuitem value="Mensagens aos Usuários" url="#" />
			        	<p:menuitem value="Relação de Codinomes" url="#" />
			        </p:submenu>
			        
			        <p:submenu label="Ferramentas" >
			        	<p:menuitem value="Adicionar no Pacote de Pesquisa" url="#" />
			        	
			        	<p:submenu label="Esvaziar Pacote de Pesquisa">
			        		<p:menuitem value="Pessoas" url="#" />
			        		<p:menuitem value="Sinopses" url="#" />
			        		<p:menuitem value="Documentos" url="#" />
			        		<p:separator/>
			        		<p:menuitem value="Todos" url="#" />
			        	</p:submenu>
			        	
			        	<p:separator/>
			        	
			        	<p:menuitem value="Adicionar no Pacote de Impressão" url="#" />
			        	<p:menuitem value="Retirar do Pacote de Impressão" url="#" />
			        	
			        	<p:separator/>
			        	
			        	<p:menuitem value="Mesclar Pessoas" url="#" />
			        	<p:menuitem value="Mesclar Sinopses" url="#" />
			        	
			        	<p:separator/>
			        	
			        	<p:menuitem value="Inserir Pessoas em Massa" url="#" />
			        	<p:menuitem value="Inserir Sinopses em Massa" url="#" />
			        	
			        	<p:separator/>
			        	
			        	<p:menuitem value="Atualizar Fonética de Nomes" url="#" />
			        	<p:menuitem value="Ocultar Sinopses" url="#" />
			        	<p:menuitem value="Restaurar Sinopses" url="#" />
			        	<p:menuitem value="Sincronizar Fotos" url="#" />        	        	
			        </p:submenu>
			        
			        <p:submenu label="Consultas" >
			        </p:submenu>
			        
			        <p:submenu label="Janela">
			        </p:submenu>
			        
<!-- 			 		<p:menuitem value="Sobre" actionListener="#{buttonBean.sobre}" update="messages" />  -->
			
			
			<!--         <p:submenu label="Actions" icon="ui-icon-gear"> -->
			<!--             <p:submenu label="Ajax" icon="ui-icon-refresh"> -->
			<!--                 <p:menuitem value="Save" actionListener="#{buttonBean.save}" icon="ui-icon-disk" update="messages"/> -->
			<!--                 <p:menuitem value="Update" actionListener="#{buttonBean.update}" icon="ui-icon-arrowrefresh-1-w" update="messages"/> -->
			<!--             </p:submenu> -->
			<!--             <p:submenu label="Non-Ajax" icon="ui-icon-newwin"> -->
			<!--                 <p:menuitem value="Delete" actionListener="#{buttonBean.delete}" icon="ui-icon-close" update="messages" ajax="false"/> -->
			<!--             </p:submenu> -->
			<!--         </p:submenu> -->
			
			        <p:menuitem value="Sair" url="http://www.primefaces.org" icon="ui-icon-power" />
			    </p:menubar>
			    <!-- Fim MenuBar -->    	
	    
			    <!-- ToolBar - Ref.: http://www.primefaces.org/showcase/ui/toolbar.jsf -->
			    <p:toolbar style="font-size: 12px; margin-top:5px;">
				    <p:toolbarGroup align="left">
				        <p:commandButton type="button" value="New" icon="ui-icon-document" />
				
				        <p:commandButton type="button" value="Open" icon="ui-icon-folder-open"/>
				
				        <p:separator />
				
				        <p:commandButton type="button" title="Save" icon="ui-icon-disk"/>
				        <p:commandButton type="button" title="Delete" icon="ui-icon-trash"/>
				        <p:commandButton type="button" title="Print" icon="ui-icon-print"/>
				    </p:toolbarGroup>
				
				    <p:toolbarGroup align="right">
				        <p:menuButton value="Options">
				            <p:menuitem value="Home" url="http://www.primefaces.org" />
				            <p:menuitem value="ShowCase"
				                        url="http://www.primefaces.org/showcase" />
				            <p:menuitem value="TouchFaces"
				                        url="http://www.primefaces.org/showcase/touch" />
				        </p:menuButton>
				    </p:toolbarGroup>	
			  	</p:toolbar>
			  	<!-- Fim ToolBar -->
		  	
		</p:layoutUnit>
		
		<p:layoutUnit id="bottom" position="south" size="60">
            <h:outputLink value="http://code.google.com/p/primefaces/source/browse/examples/trunk/showcase/src/main/webapp/ui/layoutComplex.xhtml">
                        View Page Source (layoutComplex.xhtml)
            </h:outputLink>

            <br />

            <h:outputLink value="http://code.google.com/p/primefaces/source/browse/examples/trunk/showcase/src/main/java/org/primefaces/examples/view/LayoutBean.java">
                        View Backing Bean Source (LayoutBean.java)
            </h:outputLink>
        </p:layoutUnit>

        <p:layoutUnit id="left" position="west" size="300" resizable="true" closable="true" collapsible="true" header="Options" minSize="200">
            <p:accordionPanel>
                <p:tab title="Menu 1">
                    <br />
                    <p:calendar mode="inline" navigator="none"/>
                    <br />
                </p:tab>

                <p:tab title="Menu 2">
                    <h:outputText value="Menu 2 Content" />
                </p:tab>

                <p:tab title="Menu 3">
                    <h:outputText value="Menu 3 Content" />
                </p:tab>
            </p:accordionPanel>
        </p:layoutUnit>

        <p:layoutUnit id="right" position="east" size="250" header="Gallery" resizable="true" closable="true" collapsible="true"  style="text-align:center">

            <h:form>
<!--                         <ui:include src="../templates/themeMenu.xhtml" /> -->
            </h:form>

            <p:lightBox transition="fade" style="text-align:center;margin-top:20px;">
                <h:outputLink value="#{request.contextPath}/images/nature1.jpg" title="Nature 1" style="margin-bottom:5px;">
                    <h:graphicImage value="/images/nature1_small.jpg"/>
                </h:outputLink>

                <h:outputLink value="#{request.contextPath}/images/nature2.jpg" title="Nature 2" style="margin-bottom:2px;">
                    <h:graphicImage value="/images/nature2_small.jpg"/>
                </h:outputLink>

                <h:outputLink value="#{request.contextPath}/images/nature3.jpg" title="Nature 3" style="margin-bottom:2px;">
                    <h:graphicImage value="/images/nature3_small.jpg"/>
                </h:outputLink>

                <h:outputLink value="#{request.contextPath}/images/nature4.jpg" title="Nature 4" style="margin-bottom:2px;">
                    <h:graphicImage value="/images/nature4_small.jpg"/>
                </h:outputLink>
            </p:lightBox>

            <p:commandButton id="basic" value="Show Dialog" onclick="dlg1.show();" type="button" style="margin-top:10px"/>

        </p:layoutUnit>

        <p:layoutUnit id="center" position="center">								
				<!-- Buttons - Ref.: http://www.primefaces.org/showcase/ui/commandButton.jsf -->
				<p:commandButton id="bt" value="botao velho" ></p:commandButton>
				<p:commandButton id="bt1" value="Maj Ferrari" ></p:commandButton>
				<p:commandButton id="bt2" value="novo botao" ></p:commandButton>
				<!-- Fim Buttons -->
				
				<!-- InputText -->
				<p:inputText id="input" />
				
				  <!-- RadioButton - Ref.: http://www.primefaces.org/showcase/ui/selectOneRadio.jsf --> 
			      <p:selectOneRadio id="optionsRadio" >  
			          <f:selectItem itemLabel="Option 1" itemValue="1" />  
			          <f:selectItem itemLabel="Option 2" itemValue="2" />  
			          <f:selectItem itemLabel="Option 3" itemValue="3" />  
			      </p:selectOneRadio>
			      <!-- RadioButton -->
			      
			      <!-- GroupBox + RadioButtons - Ref.: http://www.primefaces.org/showcase/ui/fieldset.jsf -->
				      <p:fieldset id="groupBox" legend="Group Box" style="width:145px;">
				      	<h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">	
					    	<p:selectOneRadio id="optionsGroupBox" layout="pageDirection" >  
					          <f:selectItem itemLabel="Option 1" itemValue="1" />  
					          <f:selectItem itemLabel="Option 2" itemValue="2" />  
					          <f:selectItem itemLabel="Option 3" itemValue="3" />  
					      	</p:selectOneRadio>
				      	</h:panelGrid>
				      </p:fieldset>      
			      <!-- Fim GroupBox -->
			
			      <!-- CheckBox - Ref.: http://www.primefaces.org/showcase/ui/selectManyCheckbox.jsf -->  
			      <h3>CheckBox</h3>      	
			      	<p:selectManyCheckbox layout="pageDirection"> 
			      		<f:selectItem itemLabel="Option 1" itemValue="Option 1" />
			   		</p:selectManyCheckbox>      	      	
			   	  <!-- Fim CheckBox -->
			   	  
			   	  <!-- Select - Ref.: http://www.primefaces.org/showcase/ui/selectOneMenu.jsf -->
			   	  <h3>Select</h3>
			   	  <p:selectOneMenu>
			  	  		<f:selectItem itemLabel="Select One" itemValue="" />
			   	  		<f:selectItem itemLabel="1" itemValue="1" />
			   	  		<f:selectItem itemLabel="2" itemValue="2" />
			   	  		<f:selectItem itemLabel="3" itemValue="3" />
			 	  </p:selectOneMenu>
			 	  <!-- Fim Select -->
			 	  
			 	  <!-- Lista - Ref.: http://www.primefaces.org/showcase/ui/dataListUnordered.jsf -->
			 	  <h3>Lista</h3>
			 	  <p:panel header="lista" toggleable="true" closable="true" toggleSpeed="500" closeSpeed="2000" style="width:300px; padding: 0px; border: 0px;"> 	  
			 	  <p:dataList value="#{table.carsSmall}" var="car" itemType="disc"> 	  		
			   	  		#{car.manufacturer}, #{car.year} 			
			 	  </p:dataList>
			 	  </p:panel>
			 	  <!-- Fim Lista -->
			 	  
			 	  <!-- InputTextArea - Ref.: http://www.primefaces.org/showcase/ui/inputTextarea.jsf -->
			 	  <h3>TextArea</h3>
			 	  <p:inputTextarea rows="6" cols="33" />
			 	  
			 	  
			 	  <!-- DataTable - Ref.: http://www.primefaces.org/showcase/ui/datatableBasic.jsf -->
			 	  <h3>Tabela</h3>	 
			 	  <p:dataTable id="basic" var="car" value="#{table.carsSmall}" style="width:300px;" >
				        <p:column id="modelHeader">
				            <f:facet name="header">
				                    Model
				            </f:facet>
				            <h:outputText value="#{car.model}" />
				        </p:column>
				
				        <p:column>
				            <f:facet name="header">
				                    Year
				            </f:facet>
				            <h:outputText value="#{car.year}" />
				        </p:column>	
				    </p:dataTable>
				    <!-- Fim DataTable -->
				    
				    
				    <!-- Tree - Ref.: http://www.primefaces.org/showcase/ui/tree.jsf -->
				    <h3>Árvore</h3>	    
			 	  	<p:tree value="#{treeBean.root}" var="node" id="tree">
			 	  	    <p:treeNode id="treeNode">
				            <h:outputText value="#{node}" id="lblNode"/>
				        </p:treeNode>
				    </p:tree>
					<!-- Fim Tree -->					
		</p:layoutUnit>
	</p:layout>
	</h:form>
</h:body>
</html>		 